{% extends "base.html" %}

{% block content %}


<!-- Page Content  -->
<div id="content-page" class="content-page">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                {% if user.id == current_user.id %}
                <div class="text-center">
                    <h5>Oh, that's You! Want to move to <a href="/profile">Your Profile Page</a>?</h5>
                </div>
                {% endif %}
                <div class="iq-card">
                    <div class="iq-card-body profile-page p-0">
                        <div class="profile-header">
                            <div class="cover-container">
                                <img src="{{user.bg}}" alt="profile-bg" class="rounded img-fluid">
                                <!--
                                 <ul class="header-nav d-flex flex-wrap justify-end p-0 m-0">
                                    <li><a href="javascript:void();"><i class="ri-pencil-line"></i></a></li>
                                    <li><a href="/profile/settings"><i class="ri-settings-4-line"></i></a></li>
                                 </ul>
                                 -->
                            </div>
                            <div class="user-detail text-center mb-3">
                                <div class="profile-img">
                                    <img src="{{user.avatar}}" alt="profile-img"
                                         class="avatar-130 img-fluid"/>
                                </div>
                                <div class="profile-detail">
                                    <h3 class="">{{user.name}} {{user.surname}}</h3>
                                </div>
                            </div>
                            <div class="profile-info p-4 d-flex align-items-center justify-content-between position-relative">
                                <div class="social-links">
                                    <ul class="social-data-block d-flex align-items-center justify-content-between list-inline p-0 m-0">
                                        {% if user.show_vk %}
                                        <li class="text-center pr-3">
                                            <a href="{{user.vk}}" target="_blank"><img src="/static/images/icon/vk.png"
                                                                                       class="img-fluid rounded"
                                                                                       alt="vk"></a>
                                        </li>
                                        {% endif %}
                                        {% if user.show_facebook %}
                                        <li class="text-center pr-3">
                                            <a href="{{user.facebook}}" target="_blank"><img
                                                    src="/static/images/icon/08.png" class="img-fluid rounded"
                                                    alt="facebook"></a>
                                        </li>
                                        {% endif %}
                                        {% if user.show_twitter %}
                                        <li class="text-center pr-3">
                                            <a href="{{user.twitter}}" target="_blank"><img
                                                    src="/static/images/icon/09.png" class="img-fluid rounded"
                                                    alt="Twitter"></a>
                                        </li>
                                        {% endif %}
                                        {% if user.show_instagram %}
                                        <li class="text-center pr-3">
                                            <a href="{{user.instagram}}" target="_blank"><img
                                                    src="/static/images/icon/10.png" class="img-fluid rounded"
                                                    alt="Instagram"></a>
                                        </li>
                                        {% endif %}
                                        {% if user.show_youtube %}
                                        <li class="text-center pr-3">
                                            <a href="{{user.youtube}}" target="_blank"><img
                                                    src="/static/images/icon/12.png" class="img-fluid rounded"
                                                    alt="You tube"></a>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                                <div class="social-info">
                                    <ul class="social-data-block d-flex align-items-center justify-content-between list-inline p-0 m-0">
                                        <li class="text-center pl-3">
                                            <h6>Posts</h6>
                                            <p class="mb-0">{{posts|length}}</p>
                                        </li>
                                        <li class="text-center pl-3">
                                            <h6>Friends</h6>
                                            <p class="mb-0" id="friends-count">{{user.friends|length}}</p>
                                        </li>
                                        <li class="text-center pl-3">
                                            {% if current_user.id == user.id %}
                                            <button id="friends-button" type="button" class="btn btn-outline-warning rounded-pill mb-3" onclick="alert('WyW?')">
                                                Nevermind.
                                            </button>
                                            {% elif user in current_user.friends %}
                                            <button id="friends-button" type="button" class="btn btn-outline-danger rounded-pill mb-3" onclick="DeleteFriend({{current_user.id}}, {{user.id}})">
                                                Delete friend
                                            </button>
                                            {% elif user not in current_user.friends %}
                                            <button id="friends-button" type="button" class="btn btn-outline-primary rounded-pill mb-3" onclick="AddFriend({{current_user.id}}, {{user.id}})">
                                                Add as friend
                                            </button>
                                            {% endif %}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iq-card">
                    <div class="iq-card-body p-0">
                        <div class="user-tabing">
                            <ul class="nav nav-pills d-flex align-items-center justify-content-center profile-feed-items p-0 m-0">
                                <li class="col-sm-3 p-0">
                                    <a class="nav-link active" data-toggle="pill" href="#timeline">Timeline</a>
                                </li>
                                <li class="col-sm-3 p-0">
                                    <a class="nav-link" data-toggle="pill" href="#about">About</a>
                                </li>
                                <li class="col-sm-3 p-0">
                                    <a class="nav-link" data-toggle="pill" href="#friends">friends</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="timeline" role="tabpanel">
                        <div class="iq-card-body p-0">
                            <div class="row">
                                <div class="col-lg-4">

                                    {% if user.friends %}
                                        <div class="iq-card">
                                            <div class="iq-card-header d-flex justify-content-between">
                                                <div class="iq-header-title">
                                                    <h4 class="card-title">{{user.name}}'s Friends</h4>
                                                </div>
                                                {% if user.friends|length > 9 %}
                                                <div class="iq-card-header-toolbar d-flex align-items-center">
                                                    <p class="m-0"><a href="javacsript:void();">View all</a></p>
                                                </div>
                                                {% endif %}
                                            </div>
                                            <div class="iq-card-body">
                                                <ul class="profile-img-gallary d-flex flex-wrap p-0 m-0">
                                                    {% for friend in user.friends[:9] %}
                                                    <li class="col-md-4 col-6 pl-2 pr-0 pb-3">
                                                        <a href="/id{{friend.id}}">
                                                            <img src="{{friend.avatar}}" alt="gallary-image"
                                                                 class="img-fluid"/>
                                                        <h6 class="mt-2">{{friend.name}} {{friend.surname}}</h6>
                                                        </a>
                                                    </li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="iq-card">
                                            <div class="iq-card-header d-flex justify-content-between">
                                                <div class="iq-header-title">
                                                    <h4 class="card-title">{{user.name}} has no friends :(</h4>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                </div>
                                <div class="col-lg-8">

                                    <div class="iq-card">
                                        <div class="iq-card-body">

                                            <div class="iq-card-header d-flex justify-content-between">
                                                <div class="iq-header-title">
                                                    {% if posts %}
                                                    <h4 class="card-title">Posts on {{user.name}}'s wall :</h4>
                                                    {% else %}
                                                    <h4 class="card-title">{{user.name}} doesn't have any posts yet</h4>
                                                    {% endif %}
                                                </div>
                                            </div>

                                            {% for post in posts[::-1] %}
                                            <div class="post-item">
                                                <div class="user-post-data p-3">
                                                    <div class="d-flex flex-wrap">
                                                        <div class="media-support-user-img mr-3">
                                                            <img class="rounded-circle img-fluid"
                                                                 src="{{post.user.avatar}}" alt="">
                                                        </div>
                                                        <div class="media-support-info mt-2">
                                                            <h5 class="mb-0 d-inline-block"><a
                                                                    href="/id{{post.user_id}}" class="">{{post.user.name}}
                                                                {{post.user.surname}}</a></h5>
                                                            <p class="mb-0">{{post.get_formatted_date()}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="user-post">
                                                    <!-- POST IMAGE
                                                   <a href="javascript:void();"><img src="images/page-img/p1.jpg" alt="post-image" class="img-fluid w-100" /></a>
                                                   -->
                                                    <p>{{post.text}}</p>
                                                </div>
                                                <div class="comment-area mt-3">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div class="like-block position-relative d-flex align-items-center">
                                                            <div class="d-flex align-items-center">
                                                                <div class="like-data">
                                                                    <div class="dropdown">
                                                               <span class="dropdown-toggle" data-toggle="dropdown"
                                                                     aria-haspopup="true" aria-expanded="false"
                                                                     role="button">
                                                                    <img src="/static/images/icon/01.png"
                                                                         class="img-fluid" alt="">
                                                               </span>
                                                                    </div>
                                                                </div>
                                                                <div class="total-like-block ml-2 mr-3">
                                                                    <div class="dropdown">
                                                               <span class="dropdown-toggle" data-toggle="dropdown"
                                                                     aria-haspopup="true" aria-expanded="false"
                                                                     role="button">
                                                               {{post.likes}} Likes
                                                               </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!--
                                                           <div class="total-comment-block">
                                                              <div class="dropdown">
                                                                 <span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
                                                                 20 Comment
                                                                 </span>
                                                              </div>
                                                           </div>
                                                           -->
                                                        </div>
                                                        <!--
                                                       <div class="share-block d-flex align-items-center feather-icon mr-3">
                                                          <a href="javascript:void();"><i class="ri-share-line"></i>
                                                          <span class="ml-1">99 Share</span></a>
                                                       </div>
                                                       -->
                                                    </div>
                                                    <hr>
                                                    <ul class="post-comments p-0 m-0">
                                                        <!-- COMMENTS
                                                       <li class="mb-2">
                                                          <div class="d-flex flex-wrap">
                                                             <div class="user-img">
                                                                <img src="images/user/02.jpg" alt="userimg" class="avatar-35 rounded-circle img-fluid">
                                                             </div>
                                                             <div class="comment-data-block ml-3">
                                                                <h6>Monty Carlo</h6>
                                                                <p class="mb-0">Lorem ipsum dolor sit amet</p>
                                                                <div class="d-flex flex-wrap align-items-center comment-activity">
                                                                   <a href="javascript:void();">like</a>
                                                                   <a href="javascript:void();">reply</a>
                                                                   <a href="javascript:void();">translate</a>
                                                                   <span> 5 min </span>
                                                                </div>
                                                             </div>
                                                          </div>
                                                       </li>
                                                       -->
                                                    </ul>
                                                    <!--
                                                   <form class="comment-text d-flex align-items-center mt-3" action="javascript:void(0);">
                                                      <input type="text" class="form-control rounded">
                                                      <div class="comment-attagement d-flex">
                                                         <a href="javascript:void();"><i class="ri-link mr-3"></i></a>
                                                         <a href="javascript:void();"><i class="ri-user-smile-line mr-3"></i></a>
                                                         <a href="javascript:void();"><i class="ri-camera-line mr-3"></i></a>
                                                      </div>
                                                   </form>
                                                   -->
                                                </div>
                                            </div>
                                            {% endfor %}

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="about" role="tabpanel">
                        <div class="iq-card">
                            <div class="iq-card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <ul class="nav nav-pills basic-info-items list-inline d-block p-0 m-0">
                                            <li>
                                                <a class="nav-link active" data-toggle="pill" href="#basicinfo">Contact
                                                    and Basic Info</a>
                                            </li>

                                            <li>
                                                <a class="nav-link" data-toggle="pill" href="#family">Family and
                                                    Relationship</a>
                                            </li>


                                            <li>
                                                <a class="nav-link" data-toggle="pill" href="#work">Work and
                                                    Education</a>
                                            </li>
                                            <li>
                                                <a class="nav-link" data-toggle="pill" href="#lived">Places You've
                                                    Lived</a>
                                            </li>
                                            <li>
                                                <a class="nav-link" data-toggle="pill" href="#details">Details About
                                                    You</a>
                                            </li>

                                        </ul>
                                    </div>
                                    <div class="col-md-9 pl-4">
                                        <div class="tab-content">
                                            <div class="tab-pane fade active show" id="basicinfo" role="tabpanel">
                                                <h4>Contact Information</h4>
                                                <hr>
                                                <div class="row">

                                                    {% if user.show_email %}
                                                    <div class="col-3">
                                                        <h6>Email</h6>
                                                    </div>
                                                    <div class="col-9">
                                                        <p class="mb-0">{{user.email}}</p>
                                                    </div>
                                                    {% endif %}

                                                    {% if user.mobile_phone and user.show_mobile_phone %}
                                                    <div class="col-3">
                                                        <h6>Mobile</h6>
                                                    </div>
                                                    <div class="col-9">
                                                        <p class="mb-0">{{user.mobile_phone}}</p>
                                                    </div>
                                                    {% endif %}

                                                    {% if user.address and user.show_address %}
                                                    <div class="col-3">
                                                        <h6>Address</h6>
                                                    </div>
                                                    <div class="col-9">
                                                        <p class="mb-0">{{user.address}}</p>
                                                    </div>
                                                    {% endif %}

                                                </div>

                                                <h4 class="mt-3">Basic Information</h4>
                                                <hr>
                                                <div class="row">
                                                    {% if user.age and user.show_age %}
                                                    <div class="col-3">
                                                        <h6>Age</h6>
                                                    </div>
                                                    <div class="col-9">
                                                        <p class="mb-0">{{user.age}}</p>
                                                    </div>
                                                    {% endif %}

                                                    {% if user.gender and user.show_gender %}
                                                    <div class="col-3">
                                                        <h6>Gender</h6>
                                                    </div>
                                                    <div class="col-9">
                                                        <p class="mb-0">{{user.gender}}</p>
                                                    </div>
                                                    {% endif %}

                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="family" role="tabpanel">
                                                <h4 class="mb-3">Relationship</h4>
                                                <ul class="suggestions-lists m-0 p-0">
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><i class="ri-add-fill"></i>
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Add Your Relationship Status</h6>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <h4 class="mt-3 mb-3">Family Members</h4>
                                                <ul class="suggestions-lists m-0 p-0">
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><i class="ri-add-fill"></i>
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Add Family Members</h6>
                                                        </div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/01.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Paul Molive</h6>
                                                            <p class="mb-0">Brothe</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/02.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Anna Mull</h6>
                                                            <p class="mb-0">Sister</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/03.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Paige Turner</h6>
                                                            <p class="mb-0">Cousin</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="tab-pane fade" id="work" role="tabpanel">
                                                <h4 class="mb-3">Work</h4>
                                                <ul class="suggestions-lists m-0 p-0">
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><i class="ri-add-fill"></i>
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Add Work Place</h6>
                                                        </div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/01.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Themeforest</h6>
                                                            <p class="mb-0">Web Designer</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/02.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>iqonicdesign</h6>
                                                            <p class="mb-0">Web Developer</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/03.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>W3school</h6>
                                                            <p class="mb-0">Designer</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                </ul>
                                                <h4 class="mb-3">Professional Skills</h4>
                                                <ul class="suggestions-lists m-0 p-0">
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><i class="ri-add-fill"></i>
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Add Professional Skills</h6>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <h4 class="mt-3 mb-3">College</h4>
                                                <ul class="suggestions-lists m-0 p-0">
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><i class="ri-add-fill"></i>
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Add College</h6>
                                                        </div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/01.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Lorem ipsum</h6>
                                                            <p class="mb-0">USA</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="tab-pane fade" id="lived" role="tabpanel">
                                                <h4 class="mb-3">Current City and Hometown</h4>
                                                <ul class="suggestions-lists m-0 p-0">
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/01.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Georgia</h6>
                                                            <p class="mb-0">Georgia State</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><img src="images/user/02.jpg"
                                                                                             alt="story-img"
                                                                                             class="rounded-circle avatar-40">
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Atlanta</h6>
                                                            <p class="mb-0">Atlanta City</p>
                                                        </div>
                                                        <div class="edit-relation"><a href="javascript:void();"><i
                                                                class="ri-edit-line mr-2"></i>Edit</a></div>
                                                    </li>
                                                </ul>
                                                <h4 class="mt-3 mb-3">Other Places Lived</h4>
                                                <ul class="suggestions-lists m-0 p-0">
                                                    <li class="d-flex mb-4 align-items-center">
                                                        <div class="user-img img-fluid"><i class="ri-add-fill"></i>
                                                        </div>
                                                        <div class="media-support-info ml-3">
                                                            <h6>Add Place</h6>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="tab-pane fade" id="details" role="tabpanel">
                                                <h4 class="mb-3">About You</h4>
                                                <p>Hi, I’m Bni, I’m 26 and I work as a Web Designer for the
                                                    iqonicdesign.</p>
                                                <h4 class="mt-3 mb-3">Other Name</h4>
                                                <p>Bini Rock</p>
                                                <h4 class="mt-3 mb-3">Favorite Quotes</h4>
                                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                                                    industry. Lorem Ipsum has been the industry's standard dummy text
                                                    ever since the 1500s</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="friends" role="tabpanel">
                        <div class="iq-card">
                            <div class="iq-card-body">
                                <h2>Friends</h2>
                                <div class="friend-list-tab mt-2">
                                    <div class="tab-content">
                                        <div class="tab-pane fade active show" id="all-friends" role="tabpanel">
                                            <div class="iq-card-body p-0">
                                                <div class="row">
                                                    {% for friend in user.friends %}
                                                        <div class="col-md-6 col-lg-6 mb-3">
                                                            <div class="iq-friendlist-block">
                                                                <div class="d-flex align-items-center justify-content-between">
                                                                    <div class="d-flex align-items-center">
                                                                        <a href="/id{{friend.id}}">
                                                                            <img src="{{friend.avatar}}" alt="profile-img"
                                                                                 class="img-fluid" style="max-width: 100px; max-height: 100px;">
                                                                        </a>
                                                                        <div class="friend-info ml-3">
                                                                            <a href="/id{{friend.id}}"><h5>{{friend.name}} {{friend.surname}}</h5></a>
                                                                            <p class="mb-0">{{friend.friends|length}} friends</p>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-sm-12 text-center">
                <img src="images/page-img/page-load-loader.gif" alt="loader" style="height: 100px;">
            </div>
        </div>
    </div>
</div>
</div>
<!-- Wrapper END -->

{% endblock %}